<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>买家订单管理</title>
  <link rel="stylesheet" href="./lib/bootstrap/css/bootstrap.min.css">
  <link rel="stylesheet" href="./css/orderManage/xorderManage.css">
  <link rel="stylesheet" href="./css/common/base.css">
</head>

<body>
  <!-- 顶部搜索栏 -->
  <header class="layout_header ">
    <div class="layout_header_box">
      <form action="">
        <i class="glyphicon glyphicon-search fa-search" aria-hidden="true"></i>
        <input type="search" placeholder="请输入拍品、卖家、艺术家名称"/>
      </form>
    </div>
  </header>
  <!-- <nav class="navbar navbar-inverse" role="navigation" style="margin-bottom: 0; position: fixed; width: 100%;">
    <div class="container-fluid">
     <form class="navbar-form" role="search" style="border: none; box-shadow: none; text-align: center;">
        <div class="form-group">
          <div class="input-group">
            <span class="input-group-addon" style="background: #fff;"><span class="glyphicon glyphicon-search"></span></span>
            <input type="text" class="form-control" style="height: 30px;" placeholder="请输入拍品名称/买家名称">
            <span class="input-group-btn">
              <button class="btn btn-danger" style="height: 30px;" type="button">搜索</button>
            </span>
          </div>
        </div>
      </form>
   </div>
  </nav> -->
  <div class="container" style="position:absolute; top: 40px; width: 100%;">
    <div class="row">
      <!-- 订单选项 -->
      <ul id="myTab" class="nav nav-tabs" style="background: #f5f5f5; position: fixed; display: flex; justify-content: space-around; width: 100%;">
        <li class="active"><a href="#home" data-toggle="tab">全部</a></li>
        <li><a href="#topay" data-toggle="tab">待付款</a></li>
        <li><a href="#tosend" data-toggle="tab">待发货</a></li>
        <li><a href="#toreceive" data-toggle="tab">待收货</a></li>
        <li><a href="#toevaluate" data-toggle="tab">售后</a></li>
      </ul>
      <div id="myTabContent" class="tab-content col-xs-12" style="position:absolute;z-index:-1;top: 32px;left:0;;width:100%; overflow: auto">
        <!-- 显示全部订单 -->
        <div class="tab-pane fade in active" id="home">
          <ul class="list-group my-list-group">
            <li class="list-group-item">
              <a href="#" class="goods-title">
                <span>06-12-12</span>
                <span class="pull-right">订单编号222222222</span>
              </a>
              <a href="./orderDetail.html">
                <div class="good-content">
                  <div class="goods-img">
                    <img src="./img/logo/goods-ex.png">
                  </div>
                  <div class="goods-desc">
                    <p class="text-12px">《晒日光浴的女孩》限量艺术雕塑《晒日光浴的女孩》限量艺术雕塑《晒日光浴的女孩》限量艺术雕塑《晒日光浴的女孩》限量艺术雕塑</p>
                  </div>
                  <div class="goods-status text-12px">
                    <div class="goods-status-img"><span>待付款</span></div>
                  </div>
                </div>
              </a>
              <div class="goods-foot text-right">
                <p class="text-12px">共<span>1</span>件商品 合计：¥<strong><span class="text-13px">25.00</span></strong>（含运费¥<span>1.11</span>）</p>
              </div>
              <div class="goods-foot text-right">
                <button class="btn btn-danger btn-sm">删除订单</button>
                <a class="btn btn-danger btn-sm" href="./orderCommit.html">前去付款</a>
                <!-- <button class="btn btn-danger btn-sm" data-toggle="modal" data-target="#payMoney">前去付款</button> -->
                <button class="btn btn-danger btn-sm"data-toggle="modal" data-target="#received">确认收货</button>
              </div>
            </li>
          </ul>
        </div>
        <!-- 显示待付款订单 -->
        <div class="tab-pane fade" id="topay">
          <ul class="list-group my-list-group">
            <li class="list-group-item">
              <a href="#" class="goods-title">
                 <span>06-12-12</span>
                 <span class="pull-right">订单编号222222222</span>
               </a>
              <a href="#">
                <div class="good-content">
                  <div class="goods-img">
                    <img src="./img/logo/goods-ex.png">
                  </div>
                  <div class="goods-desc">
                    <p class="text-12px">《晒日光浴的女孩》限量艺术雕塑《晒日光浴的女孩》限量艺术雕塑《晒日光浴的女孩》限量艺术雕塑《晒日光浴的女孩》限量艺术雕塑</p>
                  </div>
                  <div class="goods-status text-12px">
                    <div class="goods-status-img"><span>待付款</span></div>
                  </div>
                </div>
              </a>
              <div class="goods-foot text-right">
                <p class="text-12px">共<span>1</span>件商品 合计：¥<strong><span class="text-13px">25.00</span></strong>（含运费¥<span>1.11</span>）</p>
              </div>
              <div class="goods-foot text-right">
                <button class="btn btn-danger btn-sm">删除订单</button>
                <a class="btn btn-danger btn-sm" href="./orderCommit.html">前去付款</a>
                <!-- <button class="btn btn-danger btn-sm" data-toggle="modal" data-target="#payMoney">前去付款</button> -->
              </div>
            </li>
          </ul>
        </div>
        <!-- 显示待发货订单 -->
        <div class="tab-pane fade" id="tosend">
          <ul class="list-group my-list-group">
            <li class="list-group-item">
              <a href="#" class="goods-title">
                 <span>06-12-12</span>
                 <span class="pull-right">订单编号222222222</span>
              </a>
              <a href="#">
                <div class="good-content">
                  <div class="goods-img">
                    <img src="./img/logo/goods-ex.png">
                  </div>
                  <div class="goods-desc">
                    <p class="text-12px">《晒日光浴的女孩》限量艺术雕塑《晒日光浴的女孩》限量艺术雕塑《晒日光浴的女孩》限量艺术雕塑《晒日光浴的女孩》限量艺术雕塑</p>
                  </div>
                  <div class="goods-status text-12px">
                    <div class="goods-status-img"><span>待发货</span></div>
                  </div>
                </div>
              </a>
              <div class="goods-foot text-right">
                <p class="text-12px">共<span>1</span>件商品 合计：¥<strong><span class="text-13px">25.00</span></strong>（含运费¥<span>1.11</span>）</p>
              </div>
              <div class="goods-foot text-right">
                <button class="btn btn-danger btn-sm">删除订单</button>
              </div>
            </li>
          </ul>
        </div>
        <!-- 显示待收货订单 -->
        <div class="tab-pane fade" id="toreceive">
          <ul class="list-group my-list-group">
            <li class="list-group-item">
              <a href="#" class="goods-title">
                 <span>06-12-12</span>
                 <span class="pull-right">订单编号222222222</span>
               </a>
              <a href="#">
                <div class="good-content">
                  <div class="goods-img">
                    <img src="./img/logo/goods-ex.png">
                  </div>
                  <div class="goods-desc">
                    <p class="text-12px">《晒日光浴的女孩》限量艺术雕塑《晒日光浴的女孩》限量艺术雕塑《晒日光浴的女孩》限量艺术雕塑《晒日光浴的女孩》限量艺术雕塑</p>
                  </div>
                  <div class="goods-status text-12px">
                    <div class="goods-status-img"><span>待收货</span></div>
                  </div>
                </div>
              </a>
              <div class="goods-foot text-right">
                <p class="text-12px">共<span>1</span>件商品 合计：¥<strong><span class="text-13px">25.00</span></strong>（含运费¥<span>1.11</span>）</p>
              </div>
              <div class="goods-foot text-right">
                <button class="btn btn-danger btn-sm">删除订单</button>
                <button class="btn btn-danger btn-sm"data-toggle="modal" data-target="#received">确认收货</button>
              </div>
            </li>
          </ul>
        </div>
        <!-- old:显示待评价订单 new:售后-->
        <div class="tab-pane fade" id="toevaluate">
          <ul class="list-group my-list-group">
            <li class="list-group-item">
              <a href="#" class="goods-title">
                 <span>06-12-12</span>
                 <span class="pull-right">订单编号222222222</span>
               </a>
              <a href="#">
                <div class="good-content">
                  <div class="goods-img">
                    <img src="./img/logo/goods-ex.png">
                  </div>
                  <div class="goods-desc">
                    <p class="text-12px">《晒日光浴的女孩》限量艺术雕塑《晒日光浴的女孩》限量艺术雕塑《晒日光浴的女孩》限量艺术雕塑《晒日光浴的女孩》限量艺术雕塑</p>
                  </div>
                  <div class="goods-status text-12px">
                    <div class="goods-status-img over"><span>已结算</span></div>
                  </div>
                </div>
              </a>
              <div class="goods-foot text-right">
                <p class="text-12px">共<span>1</span>件商品 合计：¥<strong><span class="text-13px">25.00</span></strong>（含运费¥<span>1.11</span>）</p>
              </div>
              <div class="goods-foot text-right">
                <button class="btn btn-danger btn-sm">删除订单</button>
                <button class="btn btn-danger btn-sm">售后服务</button>
              </div>
            </li>
          </ul>
        </div>
      </div>
    </div>
  </div>

  <!-- 付款模态框 -->
  <div class="modal fade" id="payMoney" role="dialog" aria-hidden="true">
    <div class="modal-dialog modal-lg container" style="position: fixed; left: 0; right: 0; bottom: 10px; background: #fff;">
      <ul class="list-group" style="margin: 0;">
      <!-- 支付金额 -->
      <li class="list-group-item row">
          <div class="col-xs-4">
            <h5>商品名称</h5>
          </div>
          <div class="col-xs-8">
            <h5 class="text-16px" style="overflow: hidden; text-overflow:ellipsis; white-space:nowrap;">《晒日光浴的女孩》限量艺术雕塑《晒日光浴的女孩》限量艺术雕塑《晒日光浴的女孩》限量艺术雕塑《晒日光浴的女孩》限量</h5>
          </div>
        </li>
        <!-- 支付方式 -->
        <li class="list-group-item row">
          <div class="col-xs-4">
            <h5>支付方式</h5>
          </div>
          <div class="col-xs-8">
            <select class="form-control">
              <option value="余额支付">余额支付</option>
              <option value="支付宝">支付宝</option>
              <option value="微信支付">微信支付</option>
            </select>
          </div>
        </li>
        <!-- 支付金额 -->
        <li class="list-group-item row">
          <div class="col-xs-4">
            <h5>支付金额</h5>
          </div>
          <div class="col-xs-8">
            <h5 class="text-danger text-16px"><strong>¥6060</strong></h5>
          </div>
        </li>
        <!-- 收货地址 -->
        <li class="list-group-item row">
          <div class="col-xs-4">
            <h5>收货地址</h5>
          </div>
          <div class="col-xs-7 text-12px user-info">
            <p><span>曾先生</span> <span>15151515151</span></p>
            <p>我假装是一个很长很长的地址，真是不可思议</p>
          </div>
          <div class="col-xs-1" style="position: absolute; right: 15px; height:80%;">
            <a href="#" class="vertical-align"><img src="./img/logo/rightArrow.png"></a>
          </div>
        </li>
        <!-- 确认按钮 -->
        <li class="list-group-item row">
          <div class="col-xs-offset-2 col-xs-8">
            <button class="btn btn-danger btn-block">确认支付</button>
          </div>
        </li>
      </ul>
    </div>
  </div>

  <!-- 确认收货模态框 -->
  <div class="modal fade" id="received" role="dialog" aria-hidden="true">
    <div class="modal-dialog" style="position: fixed; left: 0; right: 0; bottom: 40%; background: #fff; border-radius: 8px;">
      <div class="modal-content">
        <div class="modal-header">
          <h4 class="text-info">请确保已签收商品后确认收货!</h4>
        </div>
        <div class="modal-body row">
          <div class="col-xs-offset-2 col-xs-4">
            <button class="btn btn-default btn-block">确认收货</button>
          </div>
          <div class="col-xs-4">
            <button class="btn btn-danger btn-block" data-dismiss="modal">取消</button>
          </div>         
        </div>
      </div>
    </div>
  </div>
  <!-- 评价商品 -->
  <div class="fullscreen">
  </div>
  <script src="./lib/jquery/jquery.min.js"></script>
  <script src="./lib/bootstrap/js/bootstrap.min.js"></script>
  <script>
    $(function () {
      // 通过解析url来获取当前应当显示的页面
      var url = document.URL,
        reg = /^.*(\#.*)/,
        target = '#home';

      if (url.match(reg)) {
        target = url.match(reg)[1]
      }
      $('#myTab li a[href="' + target + '"]').tab('show');
    });
  </script>
</body>

</html>